<!DOCTYPE html>
<html ng-app="oppia">
  <head>
    <title>Oppia Admin Panel</title>

    {% include 'header_css_libs.html' %}
    {% include 'header_js_libs.html' %}
    <script>
      var GLOBALS = {
        csrf_token: JSON.parse('{{csrf_token|js_string}}')
      }
    </script>
  </head>

  <body ng-controller="Admin" ng-cloak>
    <div>
      Click <a href="/">here</a> to go to the main Oppia page.
    </div>
    <br>
    <div ng-if="message" style="background-color: lightyellow; position: fixed; width: 30%; z-index: 3000; border: 1px solid brown; right: 5px;">
      <[message]>
    </div>

    <h3>Reload a single exploration</h3>
    <div class="container" style="margin-left: 0;">
      {% for exploration in demo_explorations %}
        <div class="row protractor-test-reload-exploration-row">
          <span class="col-lg-4 col-md-4 col-sm-4 protractor-test-reload-exploration-title">
            {{exploration[1]}}
          </span>
          <span class="col-lg-2 col-md-2 col-sm-2">
            <button type="button" class="btn btn-default" ng-click="reloadExploration({{exploration[0]}})">
              Reload
            </button>
          </span>
        </div>
      {% endfor %}
    </div>

    <h3>Jobs</h3>

    <h4>Current time: {{human_readable_current_time}}</h4>

    <h4>One-off jobs</h4>
    <ul>
      {% for job_spec in one_off_job_specs %}
        <li>
          {{job_spec.job_type}}
          <button ng-click="startNewJob('{{job_spec.job_type}}')">
            Start new job
          </button>
          {% if job_spec.is_queued_or_running %}
            <span class="oppia-serious-warning-text">
              <strong>(warning: an instance of this job type is already running)</strong>
            </span>
          {% endif %}
        </li>
      {% endfor %}
    </ul>

    <h4>Continuous computations</h4>
    <table class="table">
      <tr>
        <th>Type</th>
        <th>Status</th>
        <th>Last started</th>
        <th>Last stop signal sent</th>
        <th>Last finished</th>
        <th>Active realtime layer</th>
        <th>Controls</th>
      </tr>
      {% for computation in continuous_computations_data %}
        <tr>
          <td>{{computation.computation_type}}</td>
          <td>{{computation.status_code}}</td>
          <td>{{computation.human_readable_last_started}}</td>
          <td>{{computation.human_readable_last_stopped}}</td>
          <td>{{computation.human_readable_last_finished}}</td>
          <td>{{computation.active_realtime_layer_index}}</td>
          <td>
            {% if computation.is_startable %}
              <button ng-click="startComputation('{{computation.computation_type}}')">
                Start
              </button>
            {% endif %}
            {% if computation.is_stoppable %}
              <button ng-click="stopComputation('{{computation.computation_type}}')">
                Stop
              </button>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </table>

    <h4>Unfinished jobs</h4>
    <em>Note: This table may be stale; refresh to see the latest state.</em>
    <table class="table">
      <tr>
        <th>Job ID</th>
        <th>Status</th>
        <th>Time started</th>
        <th>Time finished</th>
        <th></th>
      </tr>
      {% for job in unfinished_job_data %}
        <tr>
          <td>{{job.id}}</td>
          <td>{{job.status_code}}</td>
          <td>{{job.human_readable_time_started}}</td>
          <td>{{job.human_readable_time_finished}}</td>
          <td>
            {% if job.can_be_canceled %}
              <button ng-click="cancelJob('{{job['id']}}', '{{job['job_type']}}')">
                Cancel
              </button>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </table>

    <h4>Recent jobs</h4>
    <em>Note: This table may be stale; refresh to see the latest state.</em>
    <table class="table">
      <tr>
        <th>Job ID</th>
        <th>Status</th>
        <th>Time started</th>
        <th>Time finished</th>
        <th></th>
      </tr>
      {% for job in recent_job_data %}
        <tr>
          <td>{{job.id}}</td>
          <td>{{job.status_code}}</td>
          <td>{{job.human_readable_time_started}}</td>
          <td>{{job.human_readable_time_finished}}</td>
          <td>
            <button ng-click="getJobOutput('{{job['id']}}')">
              View Output
            </button>
          </td>
        </tr>
      {% endfor %}
    </table>

    <div ng-if="showJobOutput">
      <h4>Job Output</h4>
      <p>
        <[jobOutput]>
      </p>
    </div>

    <h3>Configuration properties</h3>

    <div class="container" ng-if="isNonemptyObject(configProperties)" style="margin-left: 0;">
      <div ng-repeat="(configPropertyId, configPropertyData) in configProperties">
        <div class="row" style="padding-bottom: 10px;">
          <span class="col-lg-2 col-md-2 col-sm-2">
            <em><[configPropertyData.description]></em>
          </span>
          <span class="col-lg-6 col-md-6 col-sm-6">
            <schema-based-editor schema="configPropertyData.schema" local-value="configPropertyData.value">
            </schema-based-editor>
          </span>
          <span class="col-lg-2 col-md-2 col-sm-2">
            <button type="button" class="btn btn-default" ng-click="revertToDefaultConfigPropertyValue(configPropertyId)">Revert to default</button>
          </span>
        </div>
      </div>

      <button ng-click="saveConfigProperties()">Save</button>
      <button ng-click="reloadConfigProperties()">Undo changes</button>
    </div>

    <div ng-if="!isNonemptyObject(configProperties)">
      No configuration properties are available.
    </div>

    <h3>Computed configuration properties</h3>

    <div ng-if="isNonemptyObject(computedProperties)">
      <ul>
        <li ng-repeat="(computedPropertyId, computedPropertyData) in computedProperties">
          <em><[computedPropertyData.description]></em>
          <button ng-click="refreshComputedProperty(computedPropertyId)">Reload</button>
        </li>
      </ul>
    </div>

    <div ng-if="!isNonemptyObject(computedProperties)">
      No computed configuration properties are available.
    </div>

    <h3>Performance Counters</h3>

    <ul>
      {% for counter in counters %}
        <li>
          {{counter.description}} : {{counter.value}}
        </li>
      {% endfor %}
    </ul>

    {% include 'forms/form_builder_templates.html' %}
    {% include 'footer_js_libs.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('admin/Admin.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('services/warningsData.js') }}
      {{ include_js_file('components/objectEditor.js') }}
      {{ include_js_file('components/valueGeneratorEditor.js') }}
      {{ include_js_file('forms/formBuilder.js') }}
      {{ include_js_file('expressions/evaluator.js') }}
      {{ include_js_file('expressions/parser.js') }}
      {{ object_editors_js }}
      {{ value_generators_js }}
    </script>

    {{ noninteractive_widget_html }}
  </body>
</html>
